<template>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="账户" name="account">
      <account v-bind="$attrs" ref="accountRef" :dep="dep" />
    </el-tab-pane>
    <el-tab-pane label="科室/部门" name="dep">
      <dep v-bind="$attrs" ref="depRef" :dep="dep" />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { defineProps, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'

import Account from './Account/index.vue'
import Dep from './Dep/index.vue'

const props = defineProps({
  dep: {
    type: Object,
    default: () => {},
  },
})

const activeName = ref('account')
const accountRef = ref()
const depRef = ref()

const search = () => {
  nextTick(() => {
    if (activeName.value === 'dep') {
      depRef.value?.search()
    } else {
      accountRef.value?.search()
    }
  })
}

nextTick(() => {
  accountRef.value?.setTableHeight()
})

const handleClick = () => {
  if (activeName.value === 'dep') {
    depRef.value?.search()
    depRef.value?.setTableHeight()
  } else {
    accountRef.value?.setTableHeight()
    accountRef.value?.search()
  }
}

watch(
  () => props.dep.did,
  (val) => {
    val && search()
  },
  {
    immediate: true,
  }
)

const _resizeHandle = () => {
  if (activeName.value === 'dep') {
    depRef.value?.setTableHeight()
  } else {
    accountRef.value?.setTableHeight()
  }
}
onMounted(() => {
  window.addEventListener('resize', _resizeHandle)
})
onUnmounted(() => {
  window.removeEventListener('resize', _resizeHandle)
})
</script>

<style lang="scss" scoped>
:deep() {
  .el-tabs {
    &__header {
      margin: 0;
    }
  }
}
</style>
